Frontend MediaStream yozuvi: Brauzerga asoslangan media yozib olish

Veb-brauzer ichida audio va videoni to'g'ridan-to'g'ri yozib olish imkoniyati veb-ilovalarni ishlab chiqishda inqilob qildi. Frontend MediaStream yozuvi, MediaRecorder API'sidan foydalangan holda, bu funksiyani murakkab server tomonidagi ishlov berishga tayanmasdan amalga oshirishning kuchli va samarali usulini ta'minlaydi. Bu yondashuv real vaqtda o'zaro ta'sir, kamaytirilgan kechikish va yaxshilangan foydalanuvchi tajribasini ta'minlaydi, ayniqsa onlayn uchrashuvlar, video tahrirlash vositalari va interaktiv o'quv qo'llanmalari kabi ilovalarda.

MediaStream API'sini tushunish

Brauzerga asoslangan media yozib olishning markazida MediaStream API yotadi. MediaStream audio yoki video treklari kabi media ma'lumotlari oqimini ifodalaydi. MediaStreamga kirish uchun odatda getUserMedia() metodidan foydalanasiz.

getUserMedia() metodi foydalanuvchidan mikrofon va/yoki kamerasiga kirish uchun ruxsat so'raydi. Agar foydalanuvchi ruxsat bersa, u MediaStream obyektini qaytaruvchi Promiseni qaytaradi yoki foydalanuvchi ruxsatni rad etsa yoki kirish imkoni bo'lmasa, xatolik bilan rad etadi.

Misol: Kameraga kirishni so'rash

Foydalanuvchi kamerasiga kirishni so'rashning oddiy misoli:

            
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
  .then(function(stream) {
    // Oqim mavjud, u bilan biror narsa qiling
    console.log("Kameraga kirishga ruxsat berildi!");
  })
  .catch(function(error) {
    console.error("Kameraga kirishda xatolik: ", error);
  });

            

              
                Copy
              
            
          

Tushuntirish:

• navigator.mediaDevices.getUserMedia({ video: true, audio: false }): Bu qator kameraga kirishni so'raydi (video: true) va audioni aniq o'chirib qo'yadi (audio: false). Siz bu parametrlarni audio va video yoki faqat audioni so'rash uchun o'zgartirishingiz mumkin.
• .then(function(stream) { ... }): Bu blok foydalanuvchi ruxsat berganida ishga tushadi. stream o'zgaruvchisi MediaStream obyektini saqlaydi.
• .catch(function(error) { ... }): Bu blok xatolik yuzaga kelganda, masalan, foydalanuvchi ruxsatni rad etganda ishga tushadi. Yaxshi foydalanuvchi tajribasini ta'minlash uchun xatoliklarni to'g'ri boshqarish muhim.

getUserMedia() uchun konfiguratsiya parametrlari

getUserMedia() metodi media oqimining kerakli xususiyatlarini belgilashga imkon beruvchi ixtiyoriy cheklovlar obyektini qabul qiladi. Bu quyidagi parametrlarni o'z ichiga oladi:

• video: Videoni so'rash uchun Boolean (true/false) yoki aniqroq video cheklovlari (masalan, o'lcham, kadr chastotasi) uchun obyekt.
• audio: Audioni so'rash uchun Boolean (true/false) yoki aniqroq audio cheklovlari (masalan, aks-sadoni bekor qilish, shovqinni bostirish) uchun obyekt.
• width: Video oqimining kerakli kengligi.
• height: Video oqimining kerakli balandligi.
• frameRate: Video oqimining kerakli kadr chastotasi.

Misol: Maxsus kamera o'lchamini so'rash

            
navigator.mediaDevices.getUserMedia({
  video: {
    width: { min: 640, ideal: 1280, max: 1920 },
    height: { min: 480, ideal: 720, max: 1080 }
  },
  audio: true
})
.then(function(stream) {
  // Oqim mavjud
})
.catch(function(error) {
  // Xatoliklarni qayta ishlash
});

            

              
                Copy
              
            
          

Bu misolda biz kengligi 640 va 1920 piksel (ideal holda 1280) va balandligi 480 va 1080 piksel (ideal holda 720) bo'lgan video oqimini so'rayapmiz. Shuningdek, audioni ham so'rayapmiz.

MediaRecorder API bilan tanishuv

MediaStreamga ega bo'lgach, media ma'lumotlarini yozib olish uchun MediaRecorder API'sidan foydalanishingiz mumkin. MediaRecorder API yozishni boshlash, to'xtatish, pauza qilish va davom ettirish, shuningdek, yozib olingan ma'lumotlarga kirish uchun metodlarni taqdim etadi.

MediaRecorder nusxasini yaratish

MediaRecorder nusxasini yaratish uchun MediaStream obyektini MediaRecorder konstruktoriga uzatasiz:

            
const mediaRecorder = new MediaRecorder(stream);

            

              
                Copy
              
            
          

Shuningdek, konstruktorda yozib olingan ma'lumotlar uchun kerakli MIME turi kabi qo'shimcha parametrlarni ham belgilashingiz mumkin:

            
const options = { mimeType: 'video/webm;codecs=vp9' };
const mediaRecorder = new MediaRecorder(stream, options);

            

              
                Copy
              
            
          

Qo'llab-quvvatlanadigan MIME turlari:

Mavjud MIME turlari brauzerga va u qo'llab-quvvatlaydigan kodeklarga bog'liq. Keng tarqalgan MIME turlariga quyidagilar kiradi:

• video/webm;codecs=vp9
• video/webm;codecs=vp8
• video/mp4;codecs=avc1
• audio/webm;codecs=opus
• audio/ogg;codecs=vorbis

Ma'lum bir MIME turi brauzer tomonidan qo'llab-quvvatlanishini tekshirish uchun MediaRecorder.isTypeSupported() metodidan foydalanishingiz mumkin:

            
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
  console.log('video/webm;codecs=vp9 qo\'llab-quvvatlanadi');
} else {
  console.log('video/webm;codecs=vp9 qo\'llab-quvvatlanmaydi');
}

            

              
                Copy
              
            
          

MediaRecorder bilan ma'lumotlarni yozib olish

MediaRecorder API yozib olish jarayonini kuzatish uchun tinglashingiz mumkin bo'lgan bir nechta hodisalarni taqdim etadi:

• dataavailable: Bu hodisa saqlash uchun ma'lumotlar mavjud bo'lganda ishga tushadi.
• start: Bu hodisa yozish boshlanganda ishga tushadi.
• stop: Bu hodisa yozish to'xtaganda ishga tushadi.
• pause: Bu hodisa yozish to'xtatilganda ishga tushadi.
• resume: Bu hodisa yozish davom ettirilganda ishga tushadi.
• error: Bu hodisa yozish paytida xatolik yuzaga kelsa ishga tushadi.

Eng muhim hodisa dataavailable'dir. Bu hodisa yozib olingan ma'lumotlarni o'z ichiga olgan Blob obyektini taqdim etadi. Siz bu Blob obyektlarini to'plashingiz va yozish tugagandan so'ng ularni bitta Blobga birlashtirishingiz mumkin.

Misol: Videoni yozib olish va saqlash

            
let recordedChunks = [];

mediaRecorder.ondataavailable = function(event) {
  console.log('ma\'lumot-mavjud: ', event.data.size);
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
  }
};

mediaRecorder.onstop = function() {
  console.log('Yozib olish to\'xtatildi!');
  const blob = new Blob(recordedChunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'yozib-olingan-video.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    URL.revokeObjectURL(url);
    document.body.removeChild(a);
  }, 100);
};

mediaRecorder.start();
console.log("Yozib olish boshlandi!");

// Yozib olishni to'xtatish uchun:
// mediaRecorder.stop();

            

              
                Copy
              
            
          

Tushuntirish:

• let recordedChunks = [];: Yozib olingan ma'lumotlar qismlarini saqlash uchun massiv.
• mediaRecorder.ondataavailable = function(event) { ... }: Bu funksiya yangi ma'lumotlar mavjud bo'lganda chaqiriladi. U ma'lumotlarni recordedChunks massiviga qo'shadi.
• mediaRecorder.onstop = function() { ... }: Bu funksiya yozish to'xtaganda chaqiriladi. U to'plangan qismlardan Blob yaratadi, Blob uchun URL yaratadi, yuklab olish havolasini yaratadi va yuklab olishni boshlaydi. Shuningdek, u qisqa kechikishdan so'ng yaratilgan URL obyektini tozalaydi.
• mediaRecorder.start();: Bu yozib olish jarayonini boshlaydi.
• mediaRecorder.stop();: Yozib olishni to'xtatish uchun buni chaqiring.

Yozib olish jarayonini boshqarish

MediaRecorder API yozib olish jarayonini boshqarish uchun metodlarni taqdim etadi:

• start(timeslice): Yozishni boshlaydi. Ixtiyoriy timeslice argumenti dataavailable hodisasi qaysi intervalda (millisekundlarda) ishga tushirilishi kerakligini belgilaydi. Agar timeslice berilmagan bo'lsa, dataavailable hodisasi faqat yozish to'xtatilganda ishga tushadi.
• stop(): Yozishni to'xtatadi.
• pause(): Yozishni to'xtatib turadi.
• resume(): Yozishni davom ettiradi.
• requestData(): dataavailable hodisasini qo'lda ishga tushiradi.

Brauzer mosligi va Polifillar

MediaStream va MediaRecorder API'lari zamonaviy brauzerlarda keng qo'llab-quvvatlanadi. Biroq, eski brauzerlar bu API'larni mahalliy ravishda qo'llab-quvvatlamasligi mumkin. Agar siz eski brauzerlarni qo'llab-quvvatlashingiz kerak bo'lsa, kerakli funksionallikni ta'minlash uchun polifillardan foydalanishingiz mumkin.

Bir nechta polifillar mavjud, jumladan:

• adapter.js: Bu polifil WebRTC API'lari, shu jumladan getUserMedia() uchun kross-brauzer mosligini ta'minlaydi.
• recorderjs: Uni mahalliy ravishda qo'llab-quvvatlamaydigan brauzerlar uchun MediaRecorder funksionalligini ta'minlaydigan JavaScript kutubxonasi.

Amaliy qo'llanilishi va foydalanish holatlari

Frontend MediaStream yozuvi veb-ilovalarni ishlab chiqish uchun keng imkoniyatlar ochadi. Quyida ba'zi amaliy qo'llanilishlar va foydalanish holatlari keltirilgan:

• Onlayn uchrashuvlar va video konferensiyalar: Onlayn uchrashuvlar va video konferensiyalar uchun real vaqtda audio va video oqimlarini yozib oling va uzating.
• Video tahrirlash vositalari: Foydalanuvchilarga to'g'ridan-to'g'ri brauzerda video kontentni yozib olish va tahrirlash imkonini bering.
• Interaktiv o'quv qo'llanmalari va namoyishlar: Foydalanuvchi o'zaro ta'sirini yozib oladigan va shaxsiylashtirilgan fikr-mulohazalarni taqdim etadigan interaktiv o'quv qo'llanmalari va namoyishlar yarating.
• Ovoz yozish ilovalari: Eslatmalar olish, ovozli xabarlar va audio tahrirlash uchun ovoz yozish ilovalarini yarating.
• Kuzatuv tizimlari va xavfsizlik kameralari: Video oqimlarini yozib oladigan va saqlaydigan brauzerga asoslangan kuzatuv tizimlari va xavfsizlik kameralarini joriy qiling.
• Maxsus imkoniyatlar vositalari: Nutqni yozib olib, uni real vaqtda matnga aylantira oladigan yoki keyinchalik ko'rib chiqish uchun ekran faoliyatini yozib oladigan vositalarni ishlab chiqing.

Misol: Oddiy video yozish ilovasini amalga oshirish

Quyida muhokama qilingan tushunchalarni HTML, CSS va JavaScript yordamida oddiy video yozish ilovasiga qanday integratsiya qilishingiz mumkinligi haqida soddalashtirilgan misol keltirilgan:

HTML (index.html):

            
<!DOCTYPE html>
<html>
<head>
  <title>Brauzer Video Yozuvchisi</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Brauzer Video Yozuvchisi</h1>
  <video id="preview" autoplay muted></video><br>
  <button id="recordButton">Yozish</button>
  <button id="stopButton" disabled>To'xtatish</button>
  <script src="script.js"></script>
</body>
</html>

            

              
                Copy
              
            
          

CSS (style.css):

            
body {
  font-family: sans-serif;
  text-align: center;
}

video {
  width: 640px;
  height: 480px;
  border: 1px solid #ccc;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  margin: 10px;
}

            

              
                Copy
              
            
          

JavaScript (script.js):

            
const preview = document.getElementById('preview');
const recordButton = document.getElementById('recordButton');
const stopButton = document.getElementById('stopButton');

let mediaRecorder;
let recordedChunks = [];

recordButton.addEventListener('click', startRecording);
stopButton.addEventListener('click', stopRecording);

async function startRecording() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    preview.srcObject = stream;

    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.onstop = handleStop;

    mediaRecorder.start();

    recordButton.disabled = true;
    stopButton.disabled = false;

  } catch (err) {
    console.error("Media qurilmalariga kirishda xatolik.", err);
  }
}

function handleDataAvailable(event) {
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
  }
}

function stopRecording() {
  mediaRecorder.stop();

  recordButton.disabled = false;
  stopButton.disabled = true;

  // Barcha video oqimlarini to'xtatish
  preview.srcObject.getVideoTracks().forEach(track => track.stop());
}

function handleStop() {
  const blob = new Blob(recordedChunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'yozib-olingan-video.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    URL.revokeObjectURL(url);
    document.body.removeChild(a);
  }, 100);

  recordedChunks = []; // Keyingi yozuv uchun massivni tozalash
}

            

              
                Copy
              
            
          

Bu misol brauzer ichida videoni yozib olish, ko'rsatish, yozish va yuklab olishning asosiy tamoyillarini namoyish etadi. Funksionallikni oshirish uchun xatoliklarni qayta ishlash, turli kodek variantlari yoki foydalanuvchi tomonidan sozlanadigan yozuv sifatlarini qo'shishni o'ylab ko'ring.

Xavfsizlik masalalari

MediaStream yozuvi bilan ishlashda xavfsizlik masalalaridan xabardor bo'lish muhim:

• Foydalanuvchi ruxsatlari: Mikrofonga yoki kameraga kirishdan oldin har doim foydalanuvchi ruxsatini so'rang. Nima uchun bu qurilmalarga kirishingiz kerakligini aniq ko'rsating.
• HTTPS: Media oqimi shifrlanganligini va begona shaxslar tomonidan tinglanishidan himoyalanganligini ta'minlash uchun HTTPS'dan foydalaning. getUserMedia() API odatda xavfsiz kontekstni (HTTPS) talab qiladi.
• Ma'lumotlarni saqlash: Agar siz yozib olingan ma'lumotlarni saqlayotgan bo'lsangiz, ularning xavfsiz saqlanishini va ruxsatsiz kirishdan himoyalanganligini ta'minlang. Shifrlash va kirishni boshqarish mexanizmlaridan foydalanishni o'ylab ko'ring. Foydalanuvchilaringiz va ularning joylashuvi bilan bog'liq ma'lumotlar maxfiyligi qoidalariga (masalan, GDPR, CCPA) rioya qiling.
• Maxfiylik: Yozib olingan ma'lumotlardan qanday foydalanayotganingiz haqida shaffof bo'ling. Foydalanuvchilarga o'z ma'lumotlari ustidan nazoratni va uni o'chirish imkoniyatini bering.
• Zararli kod: Foydalanuvchi tomonidan yaratilgan kontent bilan ishlashda ehtiyot bo'ling, chunki u zararli kodni o'z ichiga olishi mumkin. Saytlararo skripting (XSS) hujumlarining oldini olish uchun har qanday foydalanuvchi kiritishini tozalang.

Ishlash samaradorligini optimallashtirish

MediaStream yozuvidan foydalanganda optimal ishlash samaradorligini ta'minlash uchun quyidagilarni hisobga oling:

• MIME turini tanlash: Brauzer tomonidan qo'llab-quvvatlanadigan va yaxshi siqishni ta'minlaydigan MIME turini tanlang.
• Timeslice intervali: Ma'lumotlar mavjudligi va ishlash samaradorligi o'rtasidagi muvozanatni saqlash uchun timeslice intervalini sozlang. Kichikroq timeslice intervali tez-tez dataavailable hodisalariga olib keladi, ammo bu qo'shimcha yuklamani ham oshirishi mumkin.
• Ma'lumotlarni qayta ishlash: Xotira oqishi va ishlashdagi qiyinchiliklarning oldini olish uchun yozib olingan ma'lumotlarni samarali qayta ishlang. Katta hajmdagi ma'lumotlarni qayta ishlash uchun buferlash va oqimlash kabi usullardan foydalaning.
• Foydalanuvchi interfeysi: Foydalanuvchiga yozib olish jarayoni haqida aniq fikr-mulohaza beradigan foydalanuvchi interfeysini loyihalashtiring. Yozuv indikatorini ko'rsating va yozuvni to'xtatib turish, davom ettirish va to'xtatish uchun boshqaruv elementlarini taqdim eting.

Xulosa

Frontend MediaStream yozuvi veb-ishlab chiquvchilarga to'g'ridan-to'g'ri brauzerda boy va interaktiv media tajribalarini yaratish imkoniyatini beradi. MediaStream va MediaRecorder API'larini tushunish orqali ishlab chiquvchilar onlayn uchrashuvlar va video tahrirlash vositalaridan tortib interaktiv o'quv qo'llanmalari va kuzatuv tizimlarigacha bo'lgan keng doiradagi ilovalarni yaratishi mumkin. Xavfsizlik va ishlash samaradorligi masalalariga e'tibor berib, siz veb-ilovalaringizning funksionalligi va jalb etilishini oshiradigan mustahkam va foydalanuvchiga qulay media yozish yechimlarini yaratishingiz mumkin.